<!--
 * @Author: sxb
 * @Email: sxb@mail.com
 * @Date: 2020-11-16 15:10:05
 * @Descripttion: 
-->
<template>
  <div>
    <el-form
      :model="searchFormAddress"
      ref="searchFormAddressRef"
      label-width="130px"
      :inline="true"
      size="small"
      :rules="rules"
    >
      <el-form-item label="收货人姓名：" prop="aa">
        <el-input v-model="searchFormAddress.aa" placeholder="请输入收货人姓名"></el-input>
      </el-form-item>
      <el-form-item label="所在地区" prop="bb">
        <el-select v-model="searchFormAddress.bb" placeholder="请选择">
          <el-option label="山西省" value="山西省"></el-option>
          <el-option label="陕西省" value="陕西省"></el-option>
        </el-select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-select v-model="searchFormAddress.bb" placeholder="请选择">
          <el-option label="山西省" value="山西省"></el-option>
          <el-option label="陕西省" value="陕西省"></el-option>
        </el-select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-select v-model="searchFormAddress.bb" placeholder="请选择">
          <el-option label="山西省" value="山西省"></el-option>
          <el-option label="陕西省" value="陕西省"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址：" prop="hh">
        <el-input v-model="searchFormAddress.hh"></el-input>
      </el-form-item>
      <el-form-item label="联系方式：">
        <el-input v-model="searchFormAddress.ee" placeholder="请填写手机号码或电话号码"></el-input>
      </el-form-item>
      <el-form-item label="邮政编码：">
        <el-input v-model="searchFormAddress.ff" placeholder="大陆以外地区可不填写"></el-input>
      </el-form-item>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-form-item label>
        <el-checkbox label="设置为默认地址" name="gg"></el-checkbox>
      </el-form-item>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchChange">查询</el-button>
        <el-button icon="el-icon-delete">重置</el-button>
      </el-form-item>
    </el-form>
    <avue-crud
      ref="crud"
      :option="tableAddressOption"
      :data="listAddress"
      :page="pageAddress"
      :table-loading="listAddressLoading"
      @on-load="getListAddress"
      @size-change="sizeAddressChange"
      @current-change="currentAddressChange"
      @row-update="rowUpdate"
      @row-del="rowDel"
    >
      <template slot="menu" slot-scope="scope">
        <el-button
          v-if="backAddressPermissions_btn_edit"
          type="text"
          size="small"
          icon="el-icon-edit"
          @click="handleUpdate(scope.row, scope.index)"
        >编辑</el-button>
        <el-button
          v-if="backAddressPermissions_btn_del"
          size="small"
          type="text"
          icon="el-icon-delete"
          @click="handleDelete(scope.row)"
        >删除</el-button>
      </template>
    </avue-crud>
  </div>
</template>

<script>
import { tableAddressOption } from "@/const/crud/deal/backAddress";
export default {
  name: "backAddress",
  data() {
    return {
      searchFormAddress: {},
      form: {},
      tableAddressOption: tableAddressOption,
      pageAddress: {
        total: 1, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },
      listAddress: [{}],
      listAddressLoading: false,
      rules: {
        aa: [
          {
            required: true, //是否必填
            message: "收货人姓名不能为空", //规则
            trigger: "blur", //何事件触发
          },
        ],
        bb: [
          {
            required: true, //是否必填
            message: "所在地区不能为空", //规则
            trigger: "blur", //何事件触发
          },
        ],
        hh: [
          {
            required: true, //是否必填
            message: "详细地址不能为空", //规则
            trigger: "blur", //何事件触发
          },
        ],
      },
      backAddressPermissions_btn_edit: true,
      backAddressPermissions_btn_del: true,
    };
  },
  methods: {
    getListAddress() {},
    searchChange() {
      this.pageAddress.currentPage = 1;
      this.getListAddress(this.pageAddress, form);
      done();
    },
    sizeAddressChange(pageSize) {
      this.pageAddress.pageSize = pageSize;
    },
    currentAddressChange(current) {
      this.pageAddress.currentPage = current;
    },

    rowDel(row, index) {
      this.$message.success("1秒后关闭禁止表单");
      setTimeout(() => {
        loading();
        this.$message.success("3秒后关闭表单");
      }, 1000);
      setTimeout(() => {
        done();
      }, 3000);
    },
    rowUpdate(row, index, done, loading) {
      this.$message.success("1秒后关闭禁止表单");
      setTimeout(() => {
        loading();
        this.$message.success("3秒后关闭表单");
      }, 1000);
      setTimeout(() => {
        done();
      }, 3000);
    },
    handleUpdate(row, index) {
      this.$refs.crud.rowEdit(row, index);
    },
    handleDelete(row) {
      this.$confirm('是否确认删除名称为"' + row.name + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delObj(row.id);
        })
        .then(() => {
          this.getList();
          this.$message.success("删除成功");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>